<template>
  <div class="landing-page">
    <!-- Header -->
    <header class="fixed w-full bg-white/95 backdrop-blur-sm shadow-sm z-50">
      <nav class="container mx-auto px-4 py-4 flex items-center justify-between">
        <div class="flex items-center space-x-2">
          <span class="text-[#C5D83F] text-3xl">
            <GithubOutlined />
          </span>
          <span class="text-xl font-semibold text-[#1F3A2E]">Eurasia Assignment</span>
        </div>

        <div class="hidden lg:flex items-center space-x-8">
          <span class="text-gray-600 hover:text-[#1F3A2E] cursor-pointer">功能亮点</span>
          <span class="text-gray-600 hover:text-[#1F3A2E] cursor-pointer">应用场景</span>
          <span class="text-gray-600 hover:text-[#1F3A2E] cursor-pointer">定价方案</span>
          <span class="text-gray-600 hover:text-[#1F3A2E] cursor-pointer">帮助中心</span>
        </div>

        <div class="flex items-center space-x-4">
          <router-link to="/login" class="text-[#1F3A2E] hover:text-[#C5D83F] cursor-pointer">登录</router-link>
          <router-link to="/register" class="bg-[#C5D83F] text-[#1F3A2E] px-6 py-2 rounded-lg hover:bg-[#b3c536] transition cursor-pointer">注册</router-link>
        </div>
      </nav>
    </header>

    <!-- Hero Section -->
    <section class="relative h-[800px] flex items-center">
      <img class="absolute inset-0 w-full h-full object-cover" src="/images/hero-bg.jpg" alt="modern university campus with students coding on laptops, bright daylight, blurred background" />
      <div class="absolute inset-0 bg-black/40"></div>

      <div class="container mx-auto px-4 relative z-10">
        <div class="max-w-3xl">
          <h1 class="text-5xl font-bold text-white mb-6">欧亚项目共享与在线编程平台</h1>
          <p class="text-xl text-gray-200 mb-8 leading-relaxed">
            轻松发布和接收项目，实现高效协作<br>
            智能在线判题系统，即时反馈代码质量<br>
            一站式竞赛管理，打造专业编程社区
          </p>
          <div class="flex space-x-4">
            <router-link to="/register" class="bg-[#C5D83F] text-[#1F3A2E] px-8 py-3 rounded-lg text-lg font-medium hover:bg-[#b3c536] transition cursor-pointer inline-block">立即注册</router-link>
            <a-button ghost size="large" class="bg-white/20 text-white hover:bg-white/30">了解更多</a-button>
          </div>
        </div>
      </div>
    </section>

    <!-- Features Section -->
    <section class="py-20 bg-gray-50">
      <div class="container mx-auto px-4">
        <h2 class="text-3xl font-bold text-center text-[#1F3A2E] mb-16">核心功能一览</h2>

        <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
          <!-- Feature 1 -->
          <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition">
            <div class="w-12 h-12 bg-[#C5D83F]/20 rounded-lg flex items-center justify-center mb-4">
              <RocketOutlined class="text-[#C5D83F] text-2xl" />
            </div>
            <h3 class="text-xl font-semibold mb-3">项目广场</h3>
            <p class="text-gray-600 mb-4">发布接单系统，全生命周期项目管理，让协作更简单</p>
            <div class="text-[#1F3A2E] hover:text-[#C5D83F] flex items-center cursor-pointer">
              了解详情 <RightOutlined class="ml-2" />
            </div>
          </div>

          <!-- Feature 2 -->
          <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition">
            <div class="w-12 h-12 bg-[#C5D83F]/20 rounded-lg flex items-center justify-center mb-4">
              <CodeOutlined class="text-[#C5D83F] text-2xl" />
            </div>
            <h3 class="text-xl font-semibold mb-3">在线判题 OJ</h3>
            <p class="text-gray-600 mb-4">海量编程题库，实时评测系统，助力编程能力提升</p>
            <div class="text-[#1F3A2E] hover:text-[#C5D83F] flex items-center cursor-pointer">
              了解详情 <RightOutlined class="ml-2" />
            </div>
          </div>

          <!-- Feature 3 -->
          <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition">
            <div class="w-12 h-12 bg-[#C5D83F]/20 rounded-lg flex items-center justify-center mb-4">
              <TrophyOutlined class="text-[#C5D83F] text-2xl" />
            </div>
            <h3 class="text-xl font-semibold mb-3">竞赛管理</h3>
            <p class="text-gray-600 mb-4">一键创建竞赛，自动评分排名，打造专业竞技平台</p>
            <div class="text-[#1F3A2E] hover:text-[#C5D83F] flex items-center cursor-pointer">
              了解详情 <RightOutlined class="ml-2" />
            </div>
          </div>

          <!-- Feature 4 -->
          <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition">
            <div class="w-12 h-12 bg-[#C5D83F]/20 rounded-lg flex items-center justify-center mb-4">
              <TeamOutlined class="text-[#C5D83F] text-2xl" />
            </div>
            <h3 class="text-xl font-semibold mb-3">团队协作</h3>
            <p class="text-gray-600 mb-4">实时讨论，文档共享，项目进度追踪一目了然</p>
            <div class="text-[#1F3A2E] hover:text-[#C5D83F] flex items-center cursor-pointer">
              了解详情 <RightOutlined class="ml-2" />
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Use Cases Section -->
    <section class="py-20">
      <div class="container mx-auto px-4">
        <h2 class="text-3xl font-bold text-center text-[#1F3A2E] mb-16">应用场景</h2>

        <div class="grid lg:grid-cols-3 gap-8">
          <!-- Case 1 -->
          <div class="rounded-xl overflow-hidden">
            <img class="w-full h-48 object-cover" src="/images/usecase-1.jpg" alt="学生协作开发" />
            <div class="p-6 bg-white shadow-sm">
              <h3 class="text-xl font-semibold mb-3">学生协作开发</h3>
              <p class="text-gray-600">轻松组队，在线协作，代码版本管理，让团队开发更高效</p>
            </div>
          </div>

          <!-- Case 2 -->
          <div class="rounded-xl overflow-hidden">
            <img class="w-full h-48 object-cover" src="/images/usecase-2.jpg" alt="教师批阅作业" />
            <div class="p-6 bg-white shadow-sm">
              <h3 class="text-xl font-semibold mb-3">教师批阅作业</h3>
              <p class="text-gray-600">自动判题系统，快速批阅，数据分析助力教学提升</p>
            </div>
          </div>

          <!-- Case 3 -->
          <div class="rounded-xl overflow-hidden">
            <img class="w-full h-48 object-cover" src="/images/usecase-3.jpg" alt="竞赛实时排名" />
            <div class="p-6 bg-white shadow-sm">
              <h3 class="text-xl font-semibold mb-3">竞赛实时排名</h3>
              <p class="text-gray-600">在线竞赛系统，实时排名，营造良性竞争氛围</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Featured Projects Section -->
    <section class="py-20 bg-white">
      <div class="container mx-auto px-4">
        <h2 class="text-3xl font-bold text-center text-[#1F3A2E] mb-16">优秀项目展播</h2>

        <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
          <!-- Project 1 -->
          <div class="bg-white rounded-xl shadow-sm hover:shadow-md transition overflow-hidden">
            <div class="h-48 overflow-hidden">
              <img class="w-full h-full object-cover" src="/images/project-1.jpg" alt="智能校园管理系统" />
            </div>
            <div class="p-6">
              <div class="flex items-center space-x-2 mb-4">
                <a-avatar src="/images/avatars/avatar-2.jpg" size="small" />
                <span class="text-gray-600">张明</span>
                <a-tag color="#C5D83F">已完成</a-tag>
              </div>
              <h3 class="text-xl font-semibold mb-3">智能校园管理系统</h3>
              <p class="text-gray-600 mb-4">基于 React 的现代化校园管理平台，包含数据可视化、实时通知等功能</p>
              <div class="flex items-center justify-between">
                <div class="flex space-x-2">
                  <a-tag color="default">React</a-tag>
                  <a-tag color="default">Node.js</a-tag>
                </div>
                <HeartOutlined class="text-gray-400 hover:text-red-500 cursor-pointer" />
              </div>
            </div>
          </div>

          <!-- Project 2 -->
          <div class="bg-white rounded-xl shadow-sm hover:shadow-md transition overflow-hidden">
            <div class="h-48 overflow-hidden">
              <img class="w-full h-full object-cover" src="/images/project-2.jpg" alt="在线学习助手" />
            </div>
            <div class="p-6">
              <div class="flex items-center space-x-2 mb-4">
                <a-avatar src="/images/avatars/avatar-5.jpg" size="small" />
                <span class="text-gray-600">李华</span>
                <a-tag color="#C5D83F">已完成</a-tag>
              </div>
              <h3 class="text-xl font-semibold mb-3">在线学习助手</h3>
              <p class="text-gray-600 mb-4">Flutter开发的跨平台教育应用，支持课程管理、在线测验等功能</p>
              <div class="flex items-center justify-between">
                <div class="flex space-x-2">
                  <a-tag color="default">Flutter</a-tag>
                  <a-tag color="default">Firebase</a-tag>
                </div>
                <HeartOutlined class="text-gray-400 hover:text-red-500 cursor-pointer" />
              </div>
            </div>
          </div>

          <!-- Project 3 -->
          <div class="bg-white rounded-xl shadow-sm hover:shadow-md transition overflow-hidden">
            <div class="h-48 overflow-hidden">
              <img class="w-full h-full object-cover" src="/images/project-3.jpg" alt="智能问答机器人" />
            </div>
            <div class="p-6">
              <div class="flex items-center space-x-2 mb-4">
                <a-avatar src="/images/avatars/avatar-3.jpg" size="small" />
                <span class="text-gray-600">王强</span>
                <a-tag color="#C5D83F">已完成</a-tag>
              </div>
              <h3 class="text-xl font-semibold mb-3">智能问答机器人</h3>
              <p class="text-gray-600 mb-4">基于Python的AI助手，集成自然语言处理，支持多场景应用</p>
              <div class="flex items-center justify-between">
                <div class="flex space-x-2">
                  <a-tag color="default">Python</a-tag>
                  <a-tag color="default">TensorFlow</a-tag>
                </div>
                <HeartOutlined class="text-gray-400 hover:text-red-500 cursor-pointer" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Statistics Banner -->
    <section class="py-16 bg-[#1F3A2E]">
      <div class="container mx-auto px-4">
        <div class="grid md:grid-cols-4 gap-8 text-center">
          <div class="text-white">
            <div class="text-4xl font-bold mb-2">10,000+</div>
            <div class="text-gray-300">注册用户</div>
          </div>
          <div class="text-white">
            <div class="text-4xl font-bold mb-2">5,000+</div>
            <div class="text-gray-300">发布项目</div>
          </div>
          <div class="text-white">
            <div class="text-4xl font-bold mb-2">200,000+</div>
            <div class="text-gray-300">代码评测</div>
          </div>
          <div class="text-white">
            <div class="text-4xl font-bold mb-2">150+</div>
            <div class="text-gray-300">竞赛场次</div>
          </div>
        </div>
      </div>
    </section>

    <!-- CTA Section -->
    <section class="py-20 bg-gray-50">
      <div class="container mx-auto px-4 text-center">
        <h2 class="text-3xl font-bold text-[#1F3A2E] mb-6">加入我们，快速提升编程能力</h2>
        <p class="text-xl text-gray-600 mb-8">开始你的第一个项目，体验专业的编程学习平台</p>
        <router-link to="/register" class="inline-block bg-[#C5D83F] text-[#1F3A2E] px-8 py-3 rounded-lg text-lg font-medium hover:bg-[#b3c536] transition cursor-pointer">立即注册</router-link>
      </div>
    </section>

    <!-- Footer -->
    <footer class="bg-[#1F3A2E] text-white py-12">
      <div class="container mx-auto px-4">
        <div class="grid md:grid-cols-4 gap-8 mb-8">
          <div>
            <h4 class="text-lg font-semibold mb-4">关于我们</h4>
            <ul class="space-y-2">
              <li><a class="text-gray-300 hover:text-white cursor-pointer">平台介绍</a></li>
              <li><a class="text-gray-300 hover:text-white cursor-pointer">团队成员</a></li>
              <li><a class="text-gray-300 hover:text-white cursor-pointer">加入我们</a></li>
            </ul>
          </div>

          <div>
            <h4 class="text-lg font-semibold mb-4">帮助中心</h4>
            <ul class="space-y-2">
              <li><router-link to="/help" class="text-gray-300 hover:text-white cursor-pointer">使用指南</router-link></li>
              <li><a class="text-gray-300 hover:text-white cursor-pointer">常见问题</a></li>
              <li><a class="text-gray-300 hover:text-white cursor-pointer">联系支持</a></li>
            </ul>
          </div>

          <div>
            <h4 class="text-lg font-semibold mb-4">法律条款</h4>
            <ul class="space-y-2">
              <li><router-link to="/privacy" class="text-gray-300 hover:text-white cursor-pointer">隐私政策</router-link></li>
              <li><router-link to="/terms" class="text-gray-300 hover:text-white cursor-pointer">服务条款</router-link></li>
            </ul>
          </div>

          <div>
            <h4 class="text-lg font-semibold mb-4">联系我们</h4>
            <ul class="space-y-2">
              <li class="text-gray-300">邮箱：contact@eurasia.edu</li>
              <li class="text-gray-300">电话：123-456-7890</li>
            </ul>
          </div>
        </div>
        <div class="text-center text-gray-400 pt-8 border-t border-gray-700">
          © {{ new Date().getFullYear() }} 西安欧亚学院 All Rights Reserved.
        </div>
      </div>
    </footer>
  </div>
</template>

<script setup>
import { 
  RocketOutlined, 
  CodeOutlined, 
  TrophyOutlined, 
  TeamOutlined, 
  RightOutlined,
  HeartOutlined,
  GithubOutlined
} from '@ant-design/icons-vue';
import { onMounted } from 'vue';

onMounted(() => {
  // 设置页面标题
  document.title = '首页 - 欧亚项目共享与在线编程平台';
});
</script>

<style>
/* 确保使用全局样式 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');

.landing-page {
  font-family: 'Inter', sans-serif;
}

/* 定义全局颜色变量 */
:root {
  --color-primary: #C5D83F;
  --color-primary-dark: #b3c536;
  --color-text-dark: #1F3A2E;
}

/* 容器 */
.container {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* 布局 */
.flex {
  display: flex;
}

.items-center {
  align-items: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-center {
  justify-content: center;
}

.space-x-2 > * + * {
  margin-left: 0.5rem;
}

.space-x-4 > * + * {
  margin-left: 1rem;
}

.space-x-8 > * + * {
  margin-left: 2rem;
}

.space-y-2 > * + * {
  margin-top: 0.5rem;
}

/* 网格 */
.grid {
  display: grid;
}

.gap-8 {
  gap: 2rem;
}

/* 定位 */
.fixed {
  position: fixed;
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.inset-0 {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.z-10 {
  z-index: 10;
}

.z-50 {
  z-index: 50;
}

/* 宽高 */
.w-full {
  width: 100%;
}

.h-full {
  height: 100%;
}

.h-48 {
  height: 12rem;
}

.w-12 {
  width: 3rem;
}

.h-12 {
  height: 3rem;
}

.h-\[800px\] {
  height: 800px;
}

.max-w-3xl {
  max-width: 48rem;
}

.max-w-7xl {
  max-width: 80rem;
}

/* 边距 */
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.mb-3 {
  margin-bottom: 0.75rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mb-6 {
  margin-bottom: 1.5rem;
}

.mb-8 {
  margin-bottom: 2rem;
}

.mb-16 {
  margin-bottom: 4rem;
}

.mt-4 {
  margin-top: 1rem;
}

.ml-2 {
  margin-left: 0.5rem;
}

.ml-4 {
  margin-left: 1rem;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.px-8 {
  padding-left: 2rem;
  padding-right: 2rem;
}

.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.py-16 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.py-20 {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.p-6 {
  padding: 1.5rem;
}

/* 文字 */
.text-xl {
  font-size: 1.25rem;
}

.text-2xl {
  font-size: 1.5rem;
}

.text-3xl {
  font-size: 1.875rem;
}

.text-4xl {
  font-size: 2.25rem;
}

.text-5xl {
  font-size: 3rem;
}

.text-lg {
  font-size: 1.125rem;
}

.font-bold {
  font-weight: 700;
}

.font-semibold {
  font-weight: 600;
}

.font-medium {
  font-weight: 500;
}

.text-center {
  text-align: center;
}

.leading-relaxed {
  line-height: 1.625;
}

/* 颜色 */
.bg-white {
  background-color: #fff;
}

.bg-white\/95 {
  background-color: rgba(255, 255, 255, 0.95);
}

.bg-white\/20 {
  background-color: rgba(255, 255, 255, 0.2);
}

.bg-black\/40 {
  background-color: rgba(0, 0, 0, 0.4);
}

.bg-gray-50 {
  background-color: #F9FAFB;
}

.bg-\[\#C5D83F\] {
  background-color: #C5D83F;
}

.bg-\[\#C5D83F\]\/20 {
  background-color: rgba(197, 216, 63, 0.2);
}

.bg-\[\#1F3A2E\] {
  background-color: #1F3A2E;
}

.text-white {
  color: #fff;
}

.text-\[\#C5D83F\] {
  color: #C5D83F;
}

.text-\[\#1F3A2E\] {
  color: #1F3A2E;
}

.text-gray-200 {
  color: #E5E7EB;
}

.text-gray-300 {
  color: #D1D5DB;
}

.text-gray-400 {
  color: #9CA3AF;
}

.text-gray-600 {
  color: #4B5563;
}

.border-t {
  border-top-width: 1px;
}

.border-gray-700 {
  border-color: #374151;
}

/* 互动 */
.hover\:bg-\[\#b3c536\]:hover {
  background-color: #b3c536;
}

.hover\:text-\[\#C5D83F\]:hover {
  color: #C5D83F;
}

.hover\:text-white:hover {
  color: white;
}

.hover\:bg-white\/30:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

.hover\:text-red-500:hover {
  color: #EF4444;
}

.hover\:shadow-md:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.cursor-pointer {
  cursor: pointer;
}

/* 外观 */
.rounded-lg {
  border-radius: 0.5rem;
}

.rounded-xl {
  border-radius: 0.75rem;
}

.shadow-sm {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.backdrop-blur-sm {
  backdrop-filter: blur(4px);
}

.object-cover {
  object-fit: cover;
}

.overflow-hidden {
  overflow: hidden;
}

.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.inline-block {
  display: inline-block;
}

.hidden {
  display: none;
}

/* 响应式布局 */
@media (min-width: 768px) {
  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  
  .md\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .lg\:flex {
    display: flex;
  }
  
  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  
  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 1024px) {
  .max-lg\:hidden {
    display: none;
  }
}

/* 确保响应式隐藏正常工作 */
@media (min-width: 1024px) {
  .lg\:flex {
    display: flex;
  }
  
  header .hidden {
    display: none;
  }
  
  header .lg\:flex {
    display: flex;
  }
}

@media (max-width: 1023px) {
  header .hidden.lg\:flex {
    display: none;
  }
}

/* 确保特定组件样式正确 */
.pt-8 {
  padding-top: 2rem;
}
</style> 